<template>
    <div>
        <mt-header fixed title="产品" id="head"></mt-header>
        <mt-search cancel-text="取消" placeholder="搜索"></mt-search>
        <!-- <mt-cell v-for="(productList,index) in productList" :key="index" :title="productList.name" id="cell">
            <div v-html="productList.pic">{{productList.pic}}</div>
        </mt-cell> -->
        <div class="box" v-for="(productList,index) in productList" :key="index">
            <div v-html="productList.pic">{{productList.pic}}</div>
            <div class="title">
                <p>{{productList.name}}</p>
                <span>￥{{productList.price}}</span>
                <mt-button size="small" type="danger" class="cart">加入购物车</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex';
export default {
  data(){
      return{
          value:'',
      }
  },
  computed:{
      ...mapGetters(['productList']),
  },
  methods:{
      ...mapActions(['getproductList']),
      get(){
          console.log(this.productList)
      }
  },
  created(){
      this.getproductList()
  }
}
</script>

<style scoped>
    #head{
        z-index:999;
    }
    .box{
        padding: 10px;
        border-bottom: 1px solid #e4e4e4;
        overflow: hidden;
    }
    .title{
        float: left;
    }
    .title p{
        margin-left: 10px;
    }
    .title span{
        margin-left: 10px;
        color:red;
        font-size: 20px;
    }
    .cart{
        float:right;
    }
     /* #cell {
        padding: 5px 0;
        border-bottom: 1px solid #e4e4e4;
    }
    .mint-cell-title {
        padding-bottom: 5px;
    } */
    .mint-search {
        height: 100%;
        overflow: hidden;
    }
</style>